<template>
    <div>
  <div id="MainContent" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="3">
    <ul id="Gallery" class="gallery">
        <li class="gallery_0" v-for="(item,ind) in CommentListMjs" :key="item.id">
            <a ><img :src="item.arimgs[0]" alt="1/1" @click="commodity_show_href(item.id)"/></a>
            <div class="text-info">
                <img :src="item.headImgUrl" class="touxiang" alt=""  v-if="0==item.anonymous">
                <img src="../../../assets/personal/images/niming.png" class="touxiang" alt=""  v-else>
                <span class="name"  v-if="0==item.anonymous">{{item.nickName}}</span>
                <span class="name" v-else>匿名用户</span>
                <div class="zan-info" @click="dianzan(item.id,ind)">
                    <img v-if="'Yes'!=item.thumpsUpType" src='../../../assets/personal/images/zan.png' id="zan_img" >
                    <img v-else src='../../../assets/personal/images/zan-active.png' id="zan_img" >
                    <span class="num">{{item.thumbsUp}}</span>
                </div> 
            </div>
         </li>    
     </ul>   
 </div> 
<loadingtmp :busy="busy" :datalength="CommentListMjs.length" :loadall="loadall"></loadingtmp>
    </div>
</template>
<style scoped>
  @import "../../../assets/personal/css/buyer_show.css";
  #zan_img{
      width:15px;
      height: 15px;
      vertical-align: middle;
  }
  #MainContent{
      height: 626px;
      overflow: scroll;
  }
</style>
<script>
import loadingtmp from '@/components/load/loading'
export default {
    data () {
        return {
             goodsID:this.$route.query.goods,
             CommentListMjs:{},
             page: 1,
            pageSize: 3,
            busy: false,////////////
            loadall: false,
        }
    },
    components: {
        loadingtmp
    },
    mounted(){
    },
    methods: {
        commodity_show_href:function(id){
            this.$router.push({ name: 'commodity_show_1',query:{pinglunID:id}})
        },
         dianzan:function(id_z,inde){
             this.$http.put(this.APIURL_PREFIX + '/api/wap/comment/thumbsUp', $.param({id:id_z})).then((response) => {
                   if("Yes"==this.CommentListMjs[inde].thumpsUpType){
                      this.CommentListMjs[inde].thumpsUpType="NO"
                       this.CommentListMjs[inde].thumbsUp=this.CommentListMjs[inde].thumbsUp-1
                   }else{
                      this.CommentListMjs[inde].thumpsUpType="Yes"
                       this.CommentListMjs[inde].thumbsUp=this.CommentListMjs[inde].thumbsUp+1
                   }     
                 }).catch(function (err) {
                }); 
         },
         xiuxiu(flag){//咻咻咻
            this.$http.get(this.APIURL_PREFIX+"/api/wap/commentXx/goods",{ params:{page:this.page,rows:this.pageSize,goodsId:this.goodsID}}).then((response) => {
                 var arXX = response.data.data;
                 arXX = arXX.map(function(item,index,ar){
                     item.arimgs = item.imgContent.split(",");
                     return item;
                 })       
                  if (flag) {     
                      this.CommentListMjs = this.CommentListMjs.concat(arXX);;
                  } else {  
                    this.CommentListMjs = arXX;
                 }
                if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                    this.busy = true;
                    this.loadall = true;
                }
                else {
                    this.busy = false;
                    this.page++
                 }    
            }).catch(function(err){
                 console.log(err)
            })
       },
        loadMore() {
            this.busy = true;
            setTimeout(() => {
                this.xiuxiu(this.page > 1);
            }, 500);
        },
    }
}
</script>

